//vue.config.js
const CompressionPlugin = require('compression-webpack-plugin');

let externals = {
  // key(包名) / value(这个值 是 需要在CDN中获取js, 相当于 获取的js中 的该包的全局的对象的名字)
  // 后面的名字不能随便起 应该是 js中的全局对象名

  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'ant-design-vue': 'antd',
  'axios': 'axios',
  'vuex': 'Vuex',
  'element-ui': 'ELEMENT',
  'vuetify': 'Vuetify',
  'emoji-mart-vue': 'EmojiMart',
  'vue-cropper': 'vue-cropper',
  'vue-lazyload': 'VueLazyload',
  'wangeditor': 'wangEditor'
}

const cdn = {
  css: [
    'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900',

    'https://unpkg.com/@mdi/font@latest/css/materialdesignicons.min.css',

    'https://unpkg.com/material-design-icons-iconfont@6.5.0/dist/material-design-icons.css', //mdi

    'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.6/theme-chalk/index.css',

    'https://unpkg.com/mavon-editor@2.10.4/dist/css/index.css',

    'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vuetify/2.6.0/vuetify.min.css',

  ], // 放置css文件目录
  js: [
    'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.11/vue.min.js', // vue

    'https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/3.2.0/vue-router.min.js', // vue-router

    'https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/ant-design-vue/1.7.8/antd.min.js', // ant design vue

    'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js', // axios

    'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vuex/3.6.2/vuex.min.js', // vuex

    'https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.6/index.js', // element-ui

    'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vuetify/2.6.0/vuetify.js', // vuetify

    'https://lib.baomitu.com/vue-lazyload/1.3.3/vue-lazyload.js', // vue-lazyload

    'https://unpkg.com/emoji-mart-vue@2.6.6/dist/emoji-mart.js', // emoji

    'https://unpkg.com/vue-cropper@0.5.8/dist/index.js', // vue-cropper

    'https://unpkg.com/wangeditor@latest/dist/wangEditor.min.js' //wangEditor

  ]// 放置js文件目录
}


// 跨域配置
module.exports = {

  productionSourceMap: false,
  devServer: {                //记住，别写错了devServer//设置本地默认端口  选填
    disableHostCheck: true,
    proxy: {                 //设置代理，必须填
      '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
        target: 'http://localhost:9090',     //代理的目标地址
        changeOrigin: true,              //是否设置同源，输入是的
        pathRewrite: {                   //路径重写
          '/api': ''                     //选择忽略拦截器里面的单词
        }
      }
    }
  },

  transpileDependencies: ['vuetify'],

  // 修改ant-design基础主题
  // 2022-03-27
  // by CJB

  css:
    {
    loaderOptions: {
      less: {
        lessOptions: {
          // If you are using less-loader@5 please spread the lessOptions to options directly
          modifyVars: {
            'primary-color': '#89B8CA',
            'link-color': '#89B8CA',
            'border-radius-base': '10px', // 组件/浮层圆角
            'border-color-base': '#F2F2E6', // 边框色
            'box-shadow-base': '0 6px 14px rgba(0, 0, 0, 0.15)', // 浮层阴影
            'success-color': '#89B8CA', // 成功色
            'warning-color': '#e28300', // 警告色
            'error-color': '#965454', // 错误色
          },
          javascriptEnabled: true,
        },
      },
    },
  },

  //webpack配置
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        algorithm: 'gzip', // 使用gzip压缩
        test: /\.js$|\.html$|\.css$/, // 匹配文件名
        filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)
        minRatio: 1, // 压缩率小于1才会压缩
        threshold: 10240, // 对超过10k的数据压缩
        deleteOriginalAssets: false, // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
      }),
    ],

    // 排除打包的某些选项
    externals: externals,

    //警告 webpack 的性能提示
    performance: {
      hints:'warning',
      //入口起点的最大体积
      maxEntrypointSize: 50000000,
      //生成文件的最大体积
      maxAssetSize: 30000000,
      //只给出 js 文件的性能提示
      assetFilter: function(assetFilename) {
        return assetFilename.endsWith('.js');
      }
    }
  },

  chainWebpack: config => {
    config.plugins.delete('prefetch')
    // config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    //  注入cdn的变量到index.html中
    config.plugin('html').tap((arg) => {
      arg[0].cdn = cdn
      return arg
    })
  },

}
